<template>
  <div class="GdwyyAppViewAllWorkOrders">
    <div class="top rel">
      <div @click="showDatePopup = true" class="flex-center date-box font-12 abs">
        <van-icon name="notes-o" />
        <span class="date">{{ showDate }}</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="main">
      <div class="jfgd-main main-container">
        <GdwyyAppBigTitle
          :time="showTime ? queryParam.dayId : ''"
          title="交付工单"
          color="blue"
          :showArrow="true"
          @goDetail="handlegoDetail({ title: '交付工单详情' }, 'detailTable', 'jfgd')"
        ></GdwyyAppBigTitle>
        <van-loading v-if="jfgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <div class="jfgd-top flex-center flex-between">
            <div
              class="item-box flex-between flex-column"
              v-for="(item, index) in jfgdTopList"
              :key="index + 'jfgd'"
              :style="{
                backgroundImage: `url('${bgImgMap[item.bg]}')`,
              }"
            >
              <div class="font-14 color666">{{ item.label }}</div>
              <div class="font-20 color333">{{ zjData[item.model] || 0 }}</div>
            </div>
          </div>
          <!-- <JfCard :queryParam="queryParam" :pageType="queryParam.dayId == moment().format('YYYYMMDD') ? 'morning':'evening'" /> -->
          <div v-for="(item, index) in jfDataConfig" :key="index + 'jfl0'">
            <GdwyyAppItemCard
              :col="4"
              :title="item.title"
              :list="item.list"
              :data="newJfgd"
              :dataModel="jfModel"
              :showArrow="true"
              @goDetail="handlegoDetail(item, 'jfgd', 'jfgdItem')"
            ></GdwyyAppItemCard>
          </div>
        </div>
      </div>

      <div class="fwgd-main fz-main main-container">
        <GdwyyAppBigTitle
          :time="showTime ? queryParam.dayId : ''"
          title="服务工单"
          color="puple"
          icon="viewAllWorkOrders/icon_fwgd"
        ></GdwyyAppBigTitle>
        <van-loading v-if="fwgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <div v-for="(item, index) in fwgdDataConfig" :key="index + 'fzd'">
            <GdwyyAppSmallTitle
              :title="item.title"
              @goDetail="handlegoDetail({ title: item.title + '详情' }, 'detailTable', item.model)"
              :showArrow="true"
            ></GdwyyAppSmallTitle>
            <div class="flex-center flex-between">
              <div class="left flex-center">
                <img
                  class="icon"
                  :src="require('../../../assets/imgs/reconsitution/viewAllWorkOrders/' + item.icon + '.png')"
                />
                <div>
                  <div class="font-12 color333">{{ item.title }}</div>
                  <div class="font-20 main-puple">{{ fwgd[item.model] || 0 }}</div>
                </div>
              </div>
              <div class="right">
                <div class="flex-between mgb-6" v-for="(ite, ind) in item.list" :key="ind + 'li'">
                  <div class="font-13 color333">
                    <img
                      class="ite-icon"
                      :src="require('../../../assets/imgs/reconsitution/viewAllWorkOrders/' + ite.icon + '.png')"
                    />
                    {{ ite.label }}
                  </div>
                  <div class="font-13 main-puple">
                    {{
                      ite.label === '完成率'
                        ? fwgd[item.list[0].model] && fwgd[item.model]
                          ? (fwgd[item.list[0].model] / fwgd[item.model]).toFixed(2) * 100 + '%'
                          : '0%'
                        : fwgd[ite.model] || 0
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="yxgd-main main-container">
        <GdwyyAppBigTitle
          :time="showTime ? queryParam.dayId : ''"
          title="营销工单"
          color="red"
          icon="专业线"
          :showArrow="true"
          @goDetail="handlegoDetail({ title: '营销工单' }, 'yxgd')"
        ></GdwyyAppBigTitle>
        <van-loading v-if="yxgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <GdwyyAppSmallTitle title="营销任务"></GdwyyAppSmallTitle>
          <div class="csgd-box flex-center flex-wrap flex-between">
            <div class="item-box" v-for="(item, index) in csgdList" :key="index + 'cdgd'">
              <img
                class="ite-icon"
                :src="require('../../../assets/imgs/reconsitution/viewAllWorkOrders/' + item.icon + '.png')"
              />
              <div class="font-12 color666 item-label">{{ item.label }}</div>
              <div class="font-18">{{ yxgd[item.model] || 0 }}</div>
            </div>
          </div>
          <GdwyyAppSmallTitle title="效能监控"></GdwyyAppSmallTitle>
          <div class="xnjk-box">
            <div class="item-box" v-for="(item, index) in xnjkList" :key="index + 'xnjk'">
              <div class="item-top flex-between fill-w">
                <div class="font-12 color666">{{ item.label }}</div>
                <div class="color333 font-15">{{ yxgd[item.model] || 0 }}</div>
              </div>
              <div class="item-bottom fill-w flex-center">
                <div
                  class="progress"
                  :style="{
                    width: yxgd[item.model] && xnjkTotal ? (yxgd[item.model] / xnjkTotal).toFixed(2) * 100 + '%' : '0%',
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="xdgd-main main-container">
        <GdwyyAppBigTitle
          :time="showTime ? queryParam.dayId : ''"
          title="巡店工单"
          color="org"
          icon="专业线"
          :showArrow="true"
          @goDetail="handlegoDetail({ title: '巡店工单详情' }, 'detailTable', 'xdgd')"
        ></GdwyyAppBigTitle>
        <van-loading v-if="xdgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd flex-between" v-else>
          <div
            class="item-box flex-column flex-between"
            v-for="(item, index) in xdgdList"
            :key="index + 'xdgd'"
            :style="{
              backgroundImage: `url('${bgImgMap[item.bg]}')`,
            }"
          >
            <div class="color666 font-14">{{ item.label }}</div>
            <div class="num font-20 color333">
              {{
                item.label === '执行率'
                  ? xdgd[xdgdList[0].model] && xdgd[xdgdList[1].model]
                    ? (xdgd[xdgdList[1].model] / xdgd[xdgdList[0].model]).toFixed(2) * 100 + '%'
                    : '0%'
                  : xdgd[item.model] || 0
              }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-popup v-model="showDatePopup" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="请选择账期"
        :loading="isLoadingShow"
        @cancel="showDatePopup = false"
        @confirm="handleChangeDate"
        :maxDate="maxDate"
      />
    </van-popup>
  </div>
</template>
  
<script>
import moment from 'moment'
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { jfListConfig, _zyxBigListV2, _lchCallbackData } from './components/morningEvening/common'
import GdwyyAppItemCard from './components/morningEvening/components/itemCard.vue'
import dateTime from '@/components/common/dateTime.vue'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import { showZwtNav } from '@/utils/showNav.js'
import card_gcssl from '@/assets/imgs/reconsitution/viewAllWorkOrders/card_gcssl.png'
import card_pdzl from '@/assets/imgs/reconsitution/viewAllWorkOrders/card_pdzl.png'
import card_ztzl from '@/assets/imgs/reconsitution/viewAllWorkOrders/card_ztzl.png'
import card_jgzl from '@/assets/imgs/reconsitution/viewAllWorkOrders/card_jgzl.png'
import bgcardrwcs from '@/assets/imgs/reconsitution/viewAllWorkOrders/bg-card-rwcs.png'
import bgcardzxcs from '@/assets/imgs/reconsitution/viewAllWorkOrders/bg-card-zxcs.png'
import bgcarddzxcs from '@/assets/imgs/reconsitution/viewAllWorkOrders/bg-card-dzxcs.png'
import bgcardzxl from '@/assets/imgs/reconsitution/viewAllWorkOrders/bg-card-zxl.png'
import { sql2apiAction } from '@/api/manage'

const fwgdList = [
  {
    label: '已完成',
    icon: 'icon_ywc_f',
    model: 'ywc',
  },
  {
    label: '待完成',
    icon: 'icon_dwc',
    model: 'dwc',
  },
  {
    label: '完成率',
    icon: 'icon_wcl',
    model: 'wcl',
  },
]
// const _fwgdModel = {
//   FW_CSYWC: '12',
//   FW_CSDWC: '13',
//   FW_GSZGYWC: '13',
//   FW_GSZGDWC: '14',
// }
const _apiConfig = [
  {
    url: '8a31cdd68b28dfb0018b551f89300003',
    resultParamsName: 'jfgd',
    loading: 'jfgdLoading',
  },
  {
    url: '8a31cdd68b28dfb0018b552ebf4b0004',
    resultParamsName: 'fwgd',
    loading: 'fwgdLoading',
  },
  {
    url: '8a31cdd68b28dfb0018b5531443c0005',
    resultParamsName: 'yxgd',
    loading: 'yxgdLoading',
    requestPostHook: 'yxgdHooks',
  },
  {
    url: '8a31cdd68b28dfb0018b553412120006',
    resultParamsName: 'xdgd',
    loading: 'xdgdLoading',
  },
]
export default {
  name: 'viewAllWorkOrders',
  props: {
    pageType: {
      type: String,
      default: 'morning',
    },
  },
  mixins: [reconsitutionMixin],
  components: { GdwyyAppBigTitle, GdwyyAppSmallTitle, GdwyyAppItemCard, dateTime },

  data() {
    return {
      bgImgMap: { card_gcssl, card_pdzl, card_ztzl, card_jgzl, bgcardrwcs, bgcardzxcs, bgcarddzxcs, bgcardzxl },
      queryParam: {
        gridId: '',
        dayId: '',
      },
      jfModel: {
        zjpdl: 'JF_0001',
        zjztl: 'JF_0002',
        zjjgl: 'JF_0003',
        zjtdl: 'JF_0004',

        yjpdl: 'JF_0005',
        yjztl: 'JF_0006',
        yjjgl: 'JF_0007',
        yjtdl: 'JF_0008',

        xjpdl: 'JF_0009',
        xjztl: 'JF_0010',
        xjjgl: 'JF_0011',
        xjtdl: 'JF_0012',
      },
      isLoadingShow: false,
      showDatePopup: false,
      currentDate: '',
      maxDate: null,
      xdgdList: [
        {
          label: '任务次数',
          model: 'XD_RWS',
          bg: 'bgcardrwcs',
        },
        {
          label: '执行次数',
          model: 'XD_ZXS',
          bg: 'bgcardzxcs',
        },
        {
          label: '待执行次数',
          model: 'XD_DZXS',
          bg: 'bgcarddzxcs',
        },
        {
          label: '执行率',
          model: '',
          bg: 'bgcardzxl',
        },
      ],
      jfgdTopList: [
        {
          label: '工程师数量',
          model: 'JF_GCSSL',
          bg: 'card_gcssl',
        },
        {
          label: '派单总量',
          model: 'JF_PDZL',
          bg: 'card_pdzl',
        },
        {
          label: '在途总量',
          model: 'JF_ZTZL',
          bg: 'card_ztzl',
        },
        {
          label: '竣工总量',
          model: 'JF_JGZL',
          bg: 'card_jgzl',
        },
      ],
      csgdList: [
        {
          label: '总任务',
          model: 'YX_CS',
          icon: 'icon_zrw',
        },
        {
          label: '已完成',
          model: 'YX_CS_YWCRW',
          icon: 'icon_ywc',
        },
        {
          label: '已失效',
          model: 'YX_CS_YSXRW',
          icon: 'icon_ysx',
        },
        {
          label: '待分配',
          model: 'YX_CS_DFPRW',
          icon: 'icon_dfp',
        },
        {
          label: '待执行',
          model: 'YX_CS_DZXRW',
          icon: 'icon-dzx',
        },
        {
          label: '超时',
          model: 'YX_CS_CSRW',
          icon: 'icon_cs',
        },
      ],
      xnjkList: [
        {
          label: '已触达用户',
          model: 'YX_XN_YCD',
        },
        {
          label: '触达未办理用户',
          model: 'YX_XN_CDWBL',
        },
        {
          label: '意向办理用户',
          model: 'YX_XN_YXBL',
        },
        {
          label: '拒绝办理用户',
          model: 'YX_XN_JJBL',
        },
        {
          label: '下单失败',
          model: 'YX_XN_XDSB',
        },
        {
          label: '办理失败',
          model: 'YX_XN_BLSB',
        },
        {
          label: '办理成功用户',
          model: 'YX_XN_BLCG',
        },
      ],
      jfgd: {},
      jfgdLoading: false,
      fwgd: {},
      fwgdLoading: false,
      yxgd: {},
      yxgdLoading: false,
      xdgd: {},
      xdgdLoading: false,
      xnjkTotal: 0,
      newJfgd: {},
      zjData: {},
      
      url: {
        ovCh: "2c3a07178ba92724018bd1eac9890013",
        ovXh: "2c3a07178ba92724018bd1e36b490012",
        jfCh: "2c3a07178ba92724018bb9eab5bc0006",
        jfXh: "2c3a07178ba92724018bc78b84db000c",
      }
    }
  },

  computed: {
    showTime() {
      return this.pageType === 'morning'
    },
    showDate() {
      if (!this.queryParam.dayId) return ''
      const year = this.queryParam.dayId.substring(0, 4)
      const month = this.queryParam.dayId.substring(4, 6)
      const day = this.queryParam.dayId.substring(6)
      return `${year}-${month}-${day}`
    },
    pageTitle() {
      const obj = {
        morning: '晨会',
        evening: '夕会',
      }
      return obj[this.pageType] + '看板'
    },
    fwgdDataConfig() {
      return [
        {
          title: '测速工单',
          model: 'FW_CSZS',
          icon: 'icon_csgd',
          list: this.getListModel(fwgdList, ['FW_CSYWC', 'FW_CSDWC']),
        },
        {
          title: '光衰整改工单',
          model: 'FW_GSZGZS',
          icon: 'icon_gszg',
          list: this.getListModel(fwgdList, ['FW_GSZGYWC', 'FW_GSZGDWC']),
        },
      ]
    },
    jfDataConfig() {
      return jfListConfig
    },
  },

  created() {
    showZwtNav(this.pageTitle)
    this.initData()
  },

  methods: {
    handlegoDetail(item, router, type) {
      console.warn('555', item, router, type)
      const { title } = item
      const obj = {
        装机: 1,
        移机: 2,
        修机: 3,
      }
      const queryParam = {}
      //  装机 移机 修机
      router === 'jfgd' && (queryParam.tradeId = obj[title])
      const query = {
        pageTitle: title, //页面标题
        pageType: type,
        queryParam: JSON.stringify({ ...this.queryParam, ...queryParam }), // 查询参数
      }
      this.$open.call(this, '/publicline/viewAllWorkOrders/detail/' + router, query)
    },
    handleChangeDate(val) {
      let res = new Date(val).toLocaleDateString()
      res = res
        .split('/')
        .map((it) => it.padStart(2, '0'))
        .join('')
      this.queryParam.dayId = res
      this.setAllRequest(_apiConfig, this.queryParam)
      this.getJfOvData();
      this.getJfData();
      this.showDatePopup = false
    },
    getListModel(data, modelList = [], targetModel = '') {
      return data.map((item, index) => {
        const obj = {
          ...item,
          model: modelList[index],
        }
        targetModel && (obj.model = targetModel + item.model)
        return obj
      })
    },
    initDataPostHook(data) {
      this.setAllRequest(_apiConfig, this.queryParam)
      this.getJfOvData();
      this.getJfData();
      this.maxDate = this.currentDate = this.filterDate(this.queryParam.dayId)
    },
    filterDate(datestr) {
      if (!datestr) return ''
      const year = datestr.substring(0, 4)
      const month = datestr.substring(4, 6)
      const day = datestr.substring(6)
      const date = `${year}/${month}/${day}`
      return new Date(date)
    },
    yxgdHooks(data) {
      this.xnjkTotal = 0
      if (!Object.keys(data).length) return
      let total = 0
      this.xnjkList.forEach((item) => {
        item.model in data && (total += data[item.model])
      })
      this.xnjkTotal = total
    },
    async getJfOvData() {
      let url = "";
      if ( this.queryParam.dayId == moment().format('YYYYMMDD') ) url = this.url.ovXh;
      if ( this.queryParam.dayId < moment().format('YYYYMMDD') ) url = this.url.ovCh;
      const res = await sql2apiAction(url, {
        gridId: this.queryParam.gridId,
        dayId: this.queryParam.dayId,
      })
      const newData = res.result[0] || {}
      this.zjData = newData
    },
    async getJfData() {
      this.card1Loading = true
      let url = "";
      if ( this.queryParam.dayId == moment().format('YYYYMMDD') ) url = this.url.jfXh;
      if ( this.queryParam.dayId < moment().format('YYYYMMDD') ) url = this.url.jfCh;
      const res = await sql2apiAction(url, {
        gridId: this.queryParam.gridId,
        dayId: this.queryParam.dayId,
      })
      const newData = res.result[0] || {}
      this.card1Loading = false
      this.newJfgd = newData
    },
  },
}
</script>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppViewAllWorkOrders {
  .top {
    background-image: linear-gradient(134deg, #80d9f9 0%, #5466fa 100%);
    width: 100%;
    height: 11.7333vw;
    line-height: 11.7333vw;
    padding: 0 4vw;
    color: #fff;
    font-size: 4.5333vw;
    box-sizing: border-box;
    .date-box {
      justify-self: flex-end;
      right: 4vw;
    }
    .date {
      margin: 0 1.0667vw;
    }
  }
  .show-more {
    margin-top: 2.6667vw;
    text-align: center;
  }
  .main {
    padding: 2.1333vw 2.1333vw 4vw 2.1333vw;
    background: #f3f7fa;
  }
  .main-container {
    background: #ffffff;
    border-radius: 1.6vw;
    box-sizing: border-box;
    margin-bottom: 4vw;
    &-pd {
      padding: 0 2.6667vw 2.6667vw 2.6667vw;
    }
  }
  .fz-main {
    .icon {
      width: 10.6667vw;
      height: 10.6667vw;
      margin-right: 2.1333vw;
    }
    .left {
      width: 46%;
    }
    .right {
      width: 54%;
      .mgb-6 {
        margin-bottom: 1.6vw;
      }
      .ite-icon {
        width: 3.7333vw;
        height: 3.7333vw;
        margin-right: 1.6vw;
      }
    }
  }
  .fwgd-main {
    ::v-deep {
      .small-title::before {
        background: @main-puple-color;
      }
    }
  }
  .xdgd-main {
    .main-container-pd {
      flex-wrap: wrap;
    }
    .item-box {
      padding: 2.6667vw 0vw 2.6667vw 3.2vw;
      width: 44vw;
      box-sizing: border-box;
      height: 21.3333vw;
      .bg('viewAllWorkOrders/bg-card-rwcs.png');
    }
  }

  .jfgd-main {
    ::v-deep {
      .small-title::before {
        background: @main-blue-color;
      }
      .GdwyyAppItemCard {
        .num {
          color: @main-blue-color;
        }
        .content {
          .bg('viewAllWorkOrders/card_zj.png');
          width: 90.4vw;
        }
      }
    }
    .jfgd-top {
      flex-wrap: wrap;
      .item-box {
        width: 44vw;
        height: 21.3333vw;
        box-sizing: border-box;
        .bg('viewAllWorkOrders/card_gcssl.png');
        padding: 4.8vw 0vw 4.8vw 15.2vw;
        margin-bottom: 2.6667vw;
      }
    }
  }

 
  .yxgd-main {
    ::v-deep {
      .small-title::before {
        background: @main-red-color;
      }
    }

    .csgd-box {
      .ite-icon {
        width: 4.8vw;
        height: 4.8vw;
      }
      .item-box {
        background: #ffffff;
        box-shadow: 0 0.5333vw 1.0667vw 0.2667vw #f3f7fa;
        border-radius: 0.8vw;
        height: 24vw;
        width: 28.2667vw;
        box-sizing: border-box;
        margin-bottom: 2.6667vw;
        padding: 2.6667vw 0vw 2.6667vw 5.3333vw;
        .item-label {
          margin-bottom: 1.6vw;
          margin-top: 0.8vw;
        }
      }
    }
    .xnjk-box {
      .item-top {
        margin-bottom: 0.8vw;
      }
      .item-bottom {
        border: 0.2667vw dotted #ffa132;
        border-radius: 0.5333vw;
        height: 3.2vw;
        margin-bottom: 3.7333vw;
        .progress {
          background-image: linear-gradient(270deg, rgba(253, 128, 110, 0.8) 0%, rgba(253, 128, 110, 0) 99%);
          border-radius: 0.5333vw 26.6667vw 26.6667vw 0.5333vw;
          width: 30%;
          height: 1.0667vw;
        }
      }
    }
  }
}
</style>